import React from 'react';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import { Route, withRouter, Redirect } from 'react-router-dom';
import { Tools, Flex, List, Checkbox, SearchBar, WingBlank, Button, WhiteSpace, Switch } from 'weaver-mobile';
import QueueAnim from 'rc-queue-anim';
import RemindType from "../home/remindType";
import BreadCrumb from '../home/breadcrumb';
import DeatilSetting from "../detailSetting";

const CheckboxItem = Checkbox.CheckboxItem;
const Item = List.Item;
const getLabel = Tools.getLabel;

@withRouter
@inject('homeStore')
@observer
export default class Sublist extends React.Component {
  static defaultProps = {
    prefixCls: 'msg-setting-home',
  }

  componentDidMount() {
    const { homeStore } = this.props;
    const { detailSetting } = homeStore;
    homeStore.dataChange = false;
    document.title = detailSetting.title;
  }

  componentWillMount() {
    const { homeStore, prefixCls, history } = this.props;
    const { selectPage, userMsgConfig, detailSetting } = homeStore;
    if (detailSetting.list.subList.length == 0) {
      // 流程
      // detailSetting.list = { "details": "0", "key": "2_group", "open": { "key": "enable", "type": "CHECKBOX", "value": "1" }, "openRight": { "key": "enabletray", "type": "CHECKBOX", "value": "1" }, "otherParams": { "groupid": "2", "groupcode": "8", "status": "y" }, "subList": [{ "details": "0", "key": "10", "open": { "key": "enable", "type": "CHECKBOX", "value": "1" }, "openRight": { "key": "enabletray", "type": "CHECKBOX", "value": "1" }, "otherParams": { "typecode": "10", "include": "", "belong": "2_group", "description": "流程错误提醒", "typeid": "10", "id": "230310", "category": "item", "groupname": "流程", "typename": "流程错误提醒", "groupcode": "8" }, "title": "流程错误提醒" }, { "details": "1", "key": "11", "open": { "key": "enable", "type": "CHECKBOX", "value": "1" }, "openRight": { "key": "enabletray", "type": "CHECKBOX", "value": "1" }, "otherParams": { "typecode": "11", "include": "", "belong": "2_group", "description": "流程交流提醒", "typeid": "11", "id": "230311", "category": "item", "groupname": "流程", "typename": "流程交流提醒", "groupcode": "8", "detatilType": "2" }, "title": "流程交流提醒" }, { "details": "1", "key": "136", "open": { "key": "enable", "type": "CHECKBOX", "value": "1" }, "openRight": { "key": "enabletray", "type": "CHECKBOX", "value": "1" }, "otherParams": { "typecode": "136", "include": "", "belong": "2_group", "description": "", "typeid": "136", "id": "230312", "category": "item", "groupname": "流程", "typename": "流程转发批注提醒", "groupcode": "8", "detatilType": "2" }, "title": "流程转发批注提醒" }, { "details": "0", "key": "147", "open": { "key": "enable", "type": "CHECKBOX", "value": "1" }, "openRight": { "key": "enabletray", "type": "CHECKBOX", "value": "1" }, "otherParams": { "typecode": "147", "include": "", "belong": "2_group", "description": "", "typeid": "147", "id": "230688", "category": "item", "groupname": "流程", "typename": "流程撤回提醒", "groupcode": "8" }, "title": "流程撤回提醒" }, { "details": "1", "key": "2", "open": { "key": "enable", "type": "CHECKBOX", "value": "1" }, "openRight": { "key": "enabletray", "type": "CHECKBOX", "value": "1" }, "otherParams": { "typecode": "2", "include": ",5,6,58,3,4,", "belong": "2_group", "description": "新到达流程", "typeid": "2", "id": "230313", "category": "item", "groupname": "流程", "typename": "新到达流程", "groupcode": "8", "detatilType": "2" }, "title": "新到达流程" }, { "details": "0", "key": "56", "open": { "key": "enable", "type": "CHECKBOX", "value": "1" }, "openRight": { "key": "enabletray", "type": "CHECKBOX", "value": "1" }, "otherParams": { "typecode": "56", "include": "", "belong": "2_group", "description": "流程阅知提醒", "typeid": "56", "id": "230314", "category": "item", "groupname": "流程", "typename": "流程阅知提醒", "groupcode": "8" }, "title": "流程阅知提醒" }, { "details": "0", "key": "57", "open": { "key": "enable", "type": "CHECKBOX", "value": "1" }, "openRight": { "key": "enabletray", "type": "CHECKBOX", "value": "1" }, "otherParams": { "typecode": "57", "include": "", "belong": "2_group", "description": "流程批示提醒", "typeid": "57", "id": "230315", "category": "item", "groupname": "流程", "typename": "流程批示提醒", "groupcode": "8" }, "title": "流程批示提醒" }, { "details": "0", "key": "61", "open": { "key": "enable", "type": "CHECKBOX", "value": "1" }, "openRight": { "key": "enabletray", "type": "CHECKBOX", "value": "1" }, "otherParams": { "typecode": "61", "include": "", "belong": "2_group", "description": "", "typeid": "61", "id": "230316", "category": "item", "groupname": "流程", "typename": "流程督办提醒", "groupcode": "8" }, "title": "流程督办提醒" }, { "details": "1", "key": "7", "open": { "key": "enable", "type": "CHECKBOX", "value": "1" }, "openRight": { "key": "enabletray", "type": "CHECKBOX", "value": "1" }, "otherParams": { "typecode": "7", "include": "", "belong": "2_group", "description": "流程完成提醒", "typeid": "7", "id": "230317", "category": "item", "groupname": "流程", "typename": "流程完成提醒", "groupcode": "8", "detatilType": "2" }, "title": "流程完成提醒" }, { "details": "0", "key": "71", "open": { "key": "enable", "type": "CHECKBOX", "value": "1" }, "openRight": { "key": "enabletray", "type": "CHECKBOX", "value": "1" }, "otherParams": { "typecode": "71", "include": "", "belong": "2_group", "description": "", "typeid": "71", "id": "230318", "category": "item", "groupname": "流程", "typename": "流程退回提醒", "groupcode": "8" }, "title": "流程退回提醒" }, { "details": "1", "key": "8", "open": { "key": "enable", "type": "CHECKBOX", "value": "1" }, "openRight": { "key": "enabletray", "type": "CHECKBOX", "value": "1" }, "otherParams": { "typecode": "8", "include": "", "belong": "2_group", "description": "流程超时提醒", "typeid": "8", "id": "230319", "category": "item", "groupname": "流程", "typename": "流程超时提醒", "groupcode": "8", "detatilType": "2" }, "title": "流程超时提醒" }, { "details": "0", "key": "9", "open": { "key": "enable", "type": "CHECKBOX", "value": "1" }, "openRight": { "key": "enabletray", "type": "CHECKBOX", "value": "1" }, "otherParams": { "typecode": "9", "include": "", "belong": "2_group", "description": "关注流程提醒", "typeid": "9", "id": "230320", "category": "item", "groupname": "流程", "typename": "关注流程提醒", "groupcode": "8" }, "title": "关注流程提醒" }, { "details": "0", "key": "QEygC0V6", "open": { "key": "enable", "type": "CHECKBOX", "value": "1" }, "openRight": { "key": "enabletray", "type": "CHECKBOX", "value": "1" }, "otherParams": { "typecode": "QEygC0V6", "include": "", "belong": "2_group", "description": "", "typeid": "QEygC0V6", "id": "230689", "category": "item", "groupname": "流程", "typename": "消息中心测试-ll", "groupcode": "8" }, "title": "消息中心测试-ll" }, { "details": "0", "key": "wp6HcnRM", "open": { "key": "enable", "type": "CHECKBOX", "value": "1" }, "openRight": { "key": "enabletray", "type": "CHECKBOX", "value": "1" }, "otherParams": { "typecode": "wp6HcnRM", "include": "", "belong": "2_group", "description": "", "typeid": "wp6HcnRM", "id": "230938", "category": "item", "groupname": "流程", "typename": "guoyu-test", "groupcode": "8" }, "title": "guoyu-test" }], "title": "流程" };
      // 日程
      // detailSetting.list = {"details":"0","key":"4_group","open":{"key":"enable","type":"CHECKBOX","value":"1"},"openRight":{"key":"enabletray","type":"CHECKBOX","value":"1"},"otherParams":{"groupid":"4","groupcode":"14","status":"y"},"subList":[{"details":"0","key":"17","open":{"key":"enable","type":"CHECKBOX","value":"1"},"openRight":{"key":"enabletray","type":"CHECKBOX","value":"1"},"otherParams":{"typecode":"17","include":"","belong":"4_group","description":"日程提醒","typeid":"17","id":"177","category":"item","groupname":"日程","typename":"日程提醒","groupcode":"14","detatilType":""},"title":"日程提醒"},{"details":"1","key":"18","open":{"key":"enable","type":"CHECKBOX","value":"1"},"openRight":{"key":"enabletray","type":"CHECKBOX","value":"1"},"otherParams":{"typecode":"18","include":"","belong":"4_group","description":"日程交流提醒","typeid":"18","id":"178","category":"item","groupname":"日程","typename":"日程交流提醒","groupcode":"14","detatilType":""},"title":"日程交流提醒"}],"title":"日程"};
      // 协作
      // detailSetting.list = { "details": "0", "key": "6_group", "open": { "key": "enable", "type": "CHECKBOX", "value": "1" }, "openRight": { "key": "enabletray", "type": "CHECKBOX", "value": "1" }, "otherParams": { "groupid": "6", "groupcode": "24", "status": "y" }, "subList": [{ "details": "0", "key": "140", "open": { "key": "enable", "type": "CHECKBOX", "value": "1" }, "openRight": { "key": "enabletray", "type": "CHECKBOX", "value": "1" }, "otherParams": { "typecode": "140", "include": "", "belong": "6_group", "description": "", "typeid": "140", "id": "199422", "category": "item", "groupname": "协作", "typename": "协作退出提醒", "groupcode": "24" }, "title": "协作退出提醒" }, { "details": "0", "key": "141", "open": { "key": "enable", "type": "CHECKBOX", "value": "1" }, "openRight": { "key": "enabletray", "type": "CHECKBOX", "value": "1" }, "otherParams": { "typecode": "141", "include": "", "belong": "6_group", "description": "", "typeid": "141", "id": "199423", "category": "item", "groupname": "协作", "typename": "协作参与提醒", "groupcode": "24" }, "title": "协作参与提醒" }, { "details": "1", "key": "142", "open": { "key": "enable", "type": "CHECKBOX", "value": "1" }, "openRight": { "key": "enabletray", "type": "CHECKBOX", "value": "1" }, "otherParams": { "typecode": "142", "include": ",142,143,144,", "belong": "6_group", "description": "协作待审批提醒", "typeid": "142", "id": "199424", "category": "item", "groupname": "协作", "typename": "协作待审批提醒", "groupcode": "24", "detatilType": "1" }, "title": "协作待审批提醒" }, { "details": "1", "key": "21", "open": { "key": "enable", "type": "CHECKBOX", "value": "1" }, "openRight": { "key": "enabletray", "type": "CHECKBOX", "value": "1" }, "otherParams": { "typecode": "21", "include": "", "belong": "6_group", "description": "协作交流提醒", "typeid": "21", "id": "199425", "category": "item", "groupname": "协作", "typename": "协作交流提醒", "groupcode": "24", "detatilType": "1" }, "title": "协作交流提醒" }], "title": "协作" }
      // this.props.history.push('/home')
    }
  }

  batchSet(name, value) {
    const { homeStore } = this.props;
    const { detailSetting } = homeStore;
    homeStore.dataChange = true;
    let subList = homeStore.userMsgConfig[detailSetting.index].subList;
    subList = toJS(subList).map(item => {
      console.log(item.hide);
      if (!item.hide) {
        let setOpenRight = {
          ...item.openRight,
        }
        if (name === 'open') {
          setOpenRight = {
            ...item.openRight,
            value: !value.target.checked && '0'
          }
        }
        if (name === 'openRight') {
          setOpenRight = {
            ...item.openRight,
            value: (item['open'].value === "1" && value.target.checked) ? '1' : '0'
          }
        }
        return {
          ...item,
          [name]: {
            ...item[name],
            value: value.target.checked ? "1" : "0"
          },
          openRight: {
            ...setOpenRight,
          }
        }
      } else {
        return item;
      }
    })
    let parentValue = subList.every(item => Number(item[name].value));
    homeStore.userMsgConfig[detailSetting.index][name].value = parentValue ? "1" : "0";
    homeStore.userMsgConfig[detailSetting.index].subList = subList;
  }

  detailConfigClick = (item) => {
    const { history, homeStore } = this.props;
    const { detailSetting } = homeStore;
    homeStore.dataChange = true;
    detailSetting.tabTitle = item.title;
    detailSetting.tabIndex = `-${item.key}`;
    detailSetting.otherParams = item["otherParams"];
    // console.log(item["otherParams"])

    if (item["otherParams"].detatilType === "2") {
      homeStore.WorkflowConditionParams = {
        module: item["otherParams"].groupcode,
        route: history.location.pathname,
        callback: item.details === "1" && Number(item.open.value) ? () => {
          history.push(`/home/sublist/detailSetting`);
        } : null
      }
      homeStore.getWorkflowCondition(homeStore.WorkflowConditionParams);
    } else if (true || item["otherParams"].detatilType === "1") {
      homeStore.detailSetting.typeid = item["otherParams"].typeid;
      homeStore.DetailConditionParams = {
        id: item["otherParams"].id,
        typeid: item["otherParams"].typeid,
        module: item["otherParams"].groupcode,
        route: history.location.pathname,
        callback: item.details === "1" && Number(item.open.value) ? () => {
          history.push(`/home/sublist/detailSetting`);
        } : null
      }
      homeStore.getDetailCondition(homeStore.DetailConditionParams);
    }
  }

  render() {
    const { homeStore, prefixCls, history } = this.props;
    const { selectPage, userMsgConfig, sublistSelectPage, detailSetting } = homeStore;
    document.title = detailSetting.title;
    let checkedOpen = detailSetting.list.subList.filter(item => !item.hide).every(item => Number(item.open.value));
    let checkedOpenRight = detailSetting.list.subList.filter(item => item.open.value === "1" && !item.hide);
    if (checkedOpenRight.length == 0) {
      checkedOpenRight = false;
    } else {
      checkedOpenRight = checkedOpenRight.every(item => Number(item.openRight.value));
    }
    let openRightCheckbox = detailSetting.list.subList.filter(item => !item.hide).every(item => item.open.value === "0");
    return (
      <div className={`${prefixCls}-modal`} style={{ paddingBottom: 198 }}>
        <Route
          key="SubListHomeRemindType"
          path="/home/sublist/remindType"
          breadcrumbName=""
          render={() => (
            <QueueAnim>
              <div className="wm-route-layout">
                <RemindType storeType={sublistSelectPage} />
              </div>
            </QueueAnim>
          )}
        />
        <Route key="SubListHomedetailSetting" path="/home/sublist/detailSetting" breadcrumbName=""
          render={() => (
            <QueueAnim>
              <div className="wm-route-layout">
                <DeatilSetting />
              </div>
            </QueueAnim>
          )}
        />
        <BreadCrumb
          breadName={detailSetting.title}
          breadLevel={2}
        />
        <div className={`${prefixCls}-topSearchBar`} onClick={() => history.push(`/home/sublist/remindType`)}>
          <SearchBar
            className="search-select"
            placeholder={getLabel("83869", "请输入") + getLabel("388219", "提醒种类") + getLabel("33439", "名称")}
          />
        </div>
        <List className={`${prefixCls}-batch-checkbox`}>
          <Flex>
            <Flex.Item style={{ flex: "4" }}>
              <CheckboxItem
                checked={checkedOpen}
                onChange={this.batchSet.bind(this, 'open')}>
                {getLabel("20839", "批量")}{getLabel("26472", "启用")}
              </CheckboxItem>
            </Flex.Item>
            <Flex.Item style={{ flex: "6" }}>
              <CheckboxItem
                disabled={openRightCheckbox}
                checked={checkedOpenRight}
                onChange={this.batchSet.bind(this, 'openRight')}>
                {getLabel("523838", "批量启用PC右下角提醒")}
              </CheckboxItem>
            </Flex.Item>
          </Flex>
        </List>
        <div className={`${prefixCls}-modal-content`} style={{ background: "#F3F7FE" }}>
          {detailSetting.list.subList && detailSetting.list.subList.filter(item => !item.hide).map((item, index) => {
            return (
              <div key={item.key}>
                <List className={`${prefixCls}-subList`}>
                  <Item arrow={item.subList ? "horizontal" : ""} onClick={this.detailConfigClick.bind(this, item)}
                    extra={
                      parseInt(item.details) && Number(item.open.value) ? <span className="primary rightLink">
                        {getLabel(19342, '详细设置')}
                      </span> : null
                    }
                  >{item.title}</Item>
                  <Item
                    extra={<Switch
                      checked={Number(item.open.value)}
                      onClick={(checked) => {
                        homeStore.dataChange = true;
                        const modifyList = userMsgConfig[detailSetting.index].subList.filter(modifyItem => modifyItem.key === item.key)[0];
                        modifyList.open.value = checked ? "1" : "0";
                        if (modifyList.open.value == '0') {
                          modifyList.openRight.value = '0';
                        }
                      }}
                    />}>
                    <span className="smallFont">
                      {getLabel("26472", "启用")}
                    </span>
                  </Item>
                  <Item
                    extra={<Switch
                      disabled={!Number(item.open.value)}
                      checked={Number(item.openRight.value) && Number(item.open.value)}
                      onClick={(checked) => {
                        homeStore.dataChange = true;
                        const modifyList = userMsgConfig[detailSetting.index].subList.filter(modifyItem => modifyItem.key === item.key)[0];
                        modifyList.openRight.value = checked ? "1" : "0";
                      }}
                    />}>
                    <span className="smallFont">
                      {getLabel("523837", "启用PC右下角提醒")}
                    </span>
                  </Item>
                </List>
                <WhiteSpace size="sm" />
              </div>
            )
          })}
        </div>
        <Button type="primary" className=""
          onClick={() => {
            homeStore.saveUserMsgConfig()
            history.goBack();
          }}
        >{getLabel("30986", "保存")}</Button>
      </div>
    )
  }
}
